<div id="app"></div>

<script id="hello" type="text/regular" name="hello">
 {{#if username}}

  Hello, {{username}}. <a href='#' r-animte on-click={{username = ''}}>Logout</a>
{{#else}}
  Sorry, Guest. Please <a href='#' r-animte on-click={{this.login()}}>Login</a>
{{/if}}

</script>



<!-- 引入regular.js -->
<script src="../../dist/regular.js"></script>


<script>
//利用Regular构建你的app吧
var HelloRegular = Regular.extend({
  template: '#hello',
  login: function(){
    var data = this.data; // get data
    data.username = prompt("please enter your username", "")
  }
});


// initialize component then inject to #app's  bottom
var component = new HelloRegular({
  data: {username: null}
});
component.inject('#app'); 
</script>